import React from 'react';
import { Tree, Card, Input } from 'antd';
import {
  CodepenOutlined,
  ShareAltOutlined,
  SettingOutlined,
  FileOutlined,
} from '@ant-design/icons';
import { FormattedMessage } from 'umi';

const apiURL = '/api/services/app/PartBOM/';
const { Search } = Input;
class BomTree extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      visible: false,
      treeData: [],
      expandedKeys: [],
      searchValue: '',
      autoExpandParent: true,
    };
  }
  componentDidMount() {
    this.props.onRef(this);
    this.fetchData(this.props.BomData);
  }
  resetBomTree = () => {
    this.setState({ treeData: [] });
  };
  fetchData = (BomData: any) => {
    if (BomData && BomData.node) {
      var treeData = [];
      var node = {
        title: BomData.node.partNum + BomData.node.partDescription,
        key: BomData.node.id,
        item: BomData.node,
        icon: <CodepenOutlined />,
        type: 'root',
        children: BomData.childs ? this.mapData(BomData.childs, BomData.boos) : null,
      };
      treeData.push(node);

      this.setState({ treeData });
    }
  };
  mapData = (parentNode: any, boos: any) => {
    var treeData: any = [];
    boos.map((item: any) => {
      var node = {
        title: item.node.oprSeq + '-' + item.node.opDesc,
        key: item.node.id,
        item: item.node,
        icon: item.node.subContract ? <ShareAltOutlined /> : <SettingOutlined />,
        type: 'boo',
        children: item.mtls ? this.mapMtlData(item.mtls) : null,
      };
      treeData.push(node);
    });
    parentNode.map((item: any) => {
      var node = {
        title: item.node.partNum + item.node.partDescription,
        key: item.node.id,
        item: item.node,
        icon: <CodepenOutlined />,
        type: 'asm',
        children: item.childs ? this.mapData(item.childs, item.boos) : null,
      };
      treeData.push(node);
    });

    return treeData;
  };
  mapMtlData = (mtls: any) => {
    var treeData: any = [];
    mtls.map((item: any) => {
      var node = {
        title: item.partNum + item.partDescription,
        key: item.id,
        item,
        icon: <FileOutlined />,
        type: 'mtl',
      };
      treeData.push(node);
    });
    return treeData;
  };
  render() {
    const { treeData, autoExpandParent, expandedKeys, searchValue } = this.state;
    const onExpand = (expandedKeys: any) => {
      this.setState({
        expandedKeys,
        autoExpandParent: false,
      });
    };

    const onCheck = (checkedKeys: any) => {
      //console.log('onCheck', checkedKeys);
    };
    const getParentKey = (value: any, tree: any, expandedKeys: any = []) => {
      tree.map((item: any) => {
        if (item.title.indexOf(value) > -1) {
          expandedKeys.push(item.key);
        }
        if (item.children) {
          getParentKey(value, item.children, expandedKeys);
        }
      });
    };
    const onSearch = (e: any) => {
      const { value } = e.target;
      if (!value || value === '') {
        return;
      }
      const { treeData } = this.state;
      const expandedKeys: any = [];

      treeData[0]?.children.map((item: any) => {
        if (item.title.indexOf(value) > -1) {
          expandedKeys.push(item.key);
        }
        if (item.children) {
          getParentKey(value, item.children, expandedKeys);
        }
      });
      this.setState({
        expandedKeys,
        searchValue: value,
        autoExpandParent: true,
      });
    };

    const onSelect = (selectedKeys: any, info: any) => {
      this.props.setCurrentAsmb(info.node.item, info.node.type);
    };

    const loop = (data: any) =>
      data.map((item: any) => {
        const index = item.title.indexOf(searchValue);
        const beforeStr = item.title.substr(0, index);
        const afterStr = item.title.substr(index + searchValue.length);
        const title =
          index > -1 ? (
            <span>
              {beforeStr}
              <span style={{ color: '#f50' }}>{searchValue}</span>
              {afterStr}
            </span>
          ) : (
            <span>{item.title}</span>
          );
        if (item.children) {
          return {
            title,
            key: item.key,
            item: item.item,
            icon: item.icon,
            type: item.type,
            children: loop(item.children),
          };
        }

        return {
          title,
          key: item.key,
          item: item.item,
          icon: item.icon,
          type: item.type,
          children: item.children,
        };
      });
    return (
      <Card title={<FormattedMessage id="pages.manufacturingProcess" />}>
        <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={onSearch} />
        <Tree
          showIcon
          checkable
          defaultExpandAll
          onExpand={onExpand}
          onCheck={onCheck}
          onSelect={onSelect}
          treeData={loop(treeData)}
          autoExpandParent={autoExpandParent}
          expandedKeys={expandedKeys}
        />
      </Card>
    );
  }
}

export default BomTree;
